<template>
  <!-- 总计划变更-新增 -->
  <div class="e-form">
     <BillTop title="总计划变更新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form
          :model="formData"
          label-width="150px"
          :rules="rules"
          ref="formData"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
               <el-form-item label="单据机构：">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购方式：">
                {{['普通采购','集中采购'][formData.purchaseType]}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变更日期：">
                <!-- <el-date-picker
                  v-model="formData.planDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker> -->
                {{formData.planDate}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="不含税计划金额(元)：">
                {{formData.amountChanged}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原计划金额(元)：">
                {{formData.totalAmount}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="税率%：" prop="taxRateChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxRateChanged"
                   clearable
                             v-enter-float="{
                                    set: this,
                                    val: 'formData',
                                    key: 'taxRateChanged'
                                }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税额：" prop="taxAmountChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxAmountChanged"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <el-form-item label="录入人：">
                {{formData.preparer}}
              </el-form-item>
              <!-- <el-form-item label="变更后计划金额(元)">
                <el-input disabled v-model="formData.totalAmountChanged"></el-input>
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
               <el-form-item label="币种：">
                 {{formData.currency}}
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <el-form-item label="状态：" v-model="formData.state">
                {{ "草稿" }}
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注：">
               <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>

            </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="12">
            <el-form-item label="本位币：">
              {{ formData.baseCurName }}
            </el-form-item>
            </el-col>
              <el-col :span="12">
                <el-form-item label="本位币汇率：">
                  {{formData.baseCurRate}}
                <!-- <el-input
                    v-model="formData.baseCurRate"
                    v-enter-float2="{
                        set: formData,
                        val: 'formData',
                        key: 'baseCurName'
                    }"
                    placeholder="请输入内容"
                    :disabled="!showBaseCurName"
                    clearable>
                </el-input> -->
              </el-form-item>
              <!-- <el-form-item label="计划金额（本位币）">
                {{ formData.baseCurAmt }}
              </el-form-item> -->
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="12">

            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">
       <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button
        type="primary"
        style="background: #2e61d7"
        @click="save('formData')"
        v-debounce
        >保存</el-button
      >

      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapMutations, mapState } from 'vuex'
import { getRmbRate } from '@/api/equip/common.js'
import request from '@/api/materials/plan.js'
export default {
    data () {
        return {
            //表单数据
            formData: {
                'amount': 0,
                'amountChanged': 0,
                'baseCurAmount': 0,
                'baseCurAmountChanged': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'baseCurTaxAmount': 0,
                'baseCurTaxAmountChanged': 0,
                'baseCurTotalAmount': 0,
                'baseCurTotalAmountChanged': 0,
                'billId': '',
                'billNo': '',
                'currency': '',
                'currencyId': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'masterPlanBillId': '',
                'masterPlanBillNo': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'period': 0,
                'planDate': '',
                'preparer': '',
                'preparerId': '',
                'projectPlanId': '',
                'purchaseType': 0,
                'remarks': '',
                'rmbAmount': 0,
                'rmbAmountChanged': 0,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'rmbTaxAmount': 0,
                'rmbTaxAmountChanged': 0,
                'rmbTotalAmount': 0,
                'rmbTotalAmountChanged': 0,
                'state': '',
                'taxAmount': 0,
                'taxAmountChanged': 0,
                'taxRate': 0,
                'taxRateChanged': 0,
                'totalAmount': 0,
                'totalAmountChanged': 0,
                'workId': ''
            },
            moneyList: [], //币种
            orgId: '', //机构id
            orgName: '', //机构名称
            billid: '',
            isSkip: false, //是否跳转
            //验证
            rules: {
                planDate: [
                    { required: true, message: '请选择变更日期', trigger: 'change' },
                ],
                taxRateChanged: [{ required: true, message: '请填写税率', trigger: 'change' }],
                purchaseType: [
                    {
                        required: true,
                        message: '请至少选择一个采购方式',
                        trigger: 'change',
                    },
                ],
                currency: [
                    { required: true, message: '请至少选择一个币种', trigger: 'change' },
                ],
                besic: [{ required: true, message: '请填写备注', trigger: 'change' }],
                taxAmountChanged: [
                    { required: true, message: '请填写税额', trigger: 'change' },
                ],
            },
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            currencyForm: state => state.equip.equipData.currencyForm, //币种
            options: state => state.contract.ctClassify,
        }),
    },
    components: {},
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.formData.orgId = data.userInfo.orgInfo.orgId
        this.formData.orgName = data.userInfo.orgInfo.orgName
        this.billid = this.$route.query.billid
        this.getData()
        this.getinfo()
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        ...mapMutations(['setPopConfirm']),
        // //初始化变更单
        getData () {
            this.$Ajax
                .httpGet({
                    url: '/material/masterPlanChanged/initBaseData',
                    params: {
                        id: this.billid,
                    },
                })
                .then(res => {
                    this.formData = res
                    this.formData.amount = this.formData.amount.toFixed(2)
                    this.formData.totalAmount = this.formData.totalAmount.toFixed(2)
                    this.formData.taxAmountChanged = this.formData.taxAmountChanged.toFixed(2)
                })
        },
        getinfo () {
            const { baseCyByOrgId } = this.userInfo
            this.formData.baseCurName = baseCyByOrgId.currencyName  //本位币
            this.formData.baseCurId = baseCyByOrgId.currency
        },
        //币种切换
        currencyChange (val) {
            this.formData.currency = this.currencyForm.find(x=>x.value === val).label  //币种
            getRmbRate({  //获取机构下某币种的人民币汇率
                currency: val,
                orgId: this.userInfo.orgInfo.orgId
            }).then(res=>{
                console.log('res', res)
                // this.formData.rmbId = res.rateId
                // this.formData.rmbName = res.rate
                // this.formData.rmbRate = res.rate
                if(res.rate === 1) {
                    this.formData.rmbRate = res.rate
                    this.formData.rmbId = res.currency
                }else{
                    this.formData.rmbRate = res.rate
                    this.formData.rmbId = res.rateId
                }

            }).catch(()=>{

            })
            if(this.formData.currencyId === this.formData.baseCurId) {   //币种=本位币
                this.formData.baseCurRate = 1
                this.showBaseCurName = false
            }else{
                this.formData.baseCurRate = null
                this.showBaseCurName = true
            }
        },
        //保存按钮
        save (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    request.totalPlanChangeAdd(this.formData).then(res => {
                        this.clientPop('suc', '保存成功,是否继续', ()=>{
                            this.$router.replace({
                                path: '/totalAlterationEdit',
                                query: {
                                    billid: res,
                                    name: 'goodsAndMaterials'
                                }
                            })
                        }, this.cancel)
                    })
                } else {
                    return false
                }
            })
        },
        //取消按钮
        cancel () {
            this.$router.replace('/totalPlan')
        },
    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
